<!--
 * @Author: xiawei 1243162387@qq.com
 * @Date: 2024-04-28 07:28:09
 * @LastEditors: xiawei 1243162387@qq.com
 * @LastEditTime: 2024-05-15 16:14:28
-->
<template>
  <div class="tree-6-box">
    <VcTree ref="VCTreeRef" :defaultCheckedKeys="['1', '2']" :showCheckbox="true"
      @node-click="nodeClick" @check="check" :lazy="true" :remoteLoadData="remoteLoadData" :border="true" />
    <div class="other">
      <div class="value">
        {{ select }}
      </div>
      <div class="btns">
        <el-button type="primary" @click="getSelect">获取选中值</el-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
// 业务侧useTree封装便于复用
import useTree from '@/hooks/useTree'


const {
  VCTreeRef,
  remoteLoadData,
  nodeClick,
  check,
} = useTree()
// 获取选中值
const select = ref([])
const getSelect = () => {
  select.value = VCTreeRef.value.getCheckedKeys()
}
</script>
<style lang="scss" scoped>
.tree-6-box {
  display: flex;
  flex-direction: row;
  height: 100%;

  .other {
    padding: 0 20px;
    flex: 1;
    .value {
      border: 1px solid #dcdfe6;
      border-radius: 6px;
      height: 80%;
      margin-bottom: 20px;
      padding: 10px;
    }
  }
}
</style>